<template>
  <!-- 订单管理页 -->
  <div class="man">
    <!-- 订单导航 -->
    <div class="header">
      <el-tabs v-model="name" type="border-card" @tab-click="Tab">
        <el-tab-pane label="所有订单">
          <!-- 所有订单表格 -->
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              align="center"
              prop="id"
              label="订单编号"
              width="180"
            />
            <el-table-column
              prop="orderTime"
              align="center"
              label="下单时间"
              width="180"
            >
              <template slot-scope="scope">
                {{ scope.row.orderTime | fmtDate }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="总价">
              <template slot-scope="scope">
                {{ all(scope.row.orderLines) }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="status" label="状态" />
            <el-table-column align="center" prop="customerId" label="顾客ID" />
            <el-table-column align="center" prop="employeeId" label="员工ID" />
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="detail(scope.row.id)">详情</el-button>
                <el-button
                  v-if="scope.row.status == '待派单'"
                  type="text"
                  @click="dispatch(scope.row.id)"
                >派单</el-button>
                <el-button
                  v-else-if="scope.row.status == '待接单'"
                  type="text"
                  style="color:#FFC0A2"
                  @click="noDispatch(scope.row.id)"
                >取消派单</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 待支付的表格 -->
        <el-tab-pane label="待支付">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              align="center"
              prop="id"
              label="订单编号"
              width="180"
            />
            <el-table-column
              prop="orderTime"
              align="center"
              label="下单时间"
              width="180"
            >
              <template slot-scope="scope">
                {{ scope.row.orderTime | fmtDate }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="总价">
              <template slot-scope="scope">
                {{ all(scope.row.orderLines) }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="status" label="状态" />
            <el-table-column align="center" prop="customerId" label="顾客ID" />
            <el-table-column align="center" prop="employeeId" label="员工ID" />
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text">详情</el-button>
                <el-button
                  v-if="scope.row.status == '待派单'"
                  type="text"
                  @click="dispatch(scope.row.id)"
                >派单</el-button>
                <el-button
                  v-else-if="scope.row.status == '待接单'"
                  type="text"
                  style="color:#FFC0A2"
                  @click="noDispatch(scope.row.id)"
                >取消派单</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="待派单">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              align="center"
              prop="id"
              label="订单编号"
              width="180"
            />
            <el-table-column
              prop="orderTime"
              align="center"
              label="下单时间"
              width="180"
            >
              <template slot-scope="scope">
                {{ scope.row.orderTime | fmtDate }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="总价">
              <template slot-scope="scope">
                {{ all(scope.row.orderLines) }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="status" label="状态" />
            <el-table-column align="center" prop="customerId" label="顾客ID" />
            <el-table-column align="center" prop="employeeId" label="员工ID" />
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text">详情</el-button>
                <el-button
                  v-if="scope.row.status == '待派单'"
                  type="text"
                  @click="dispatch(scope.row.id)"
                >派单</el-button>
                <el-button
                  v-else-if="scope.row.status == '待接单'"
                  type="text"
                  style="color:#FFC0A2"
                  @click="noDispatch(scope.row.id)"
                >取消派单</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="待接单">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              align="center"
              prop="id"
              label="订单编号"
              width="180"
            />
            <el-table-column
              prop="orderTime"
              align="center"
              label="下单时间"
              width="180"
            >
              <template slot-scope="scope">
                {{ scope.row.orderTime | fmtDate }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="总价">
              <template slot-scope="scope">
                {{ all(scope.row.orderLines) }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="status" label="状态" />
            <el-table-column align="center" prop="customerId" label="顾客ID" />
            <el-table-column align="center" prop="employeeId" label="员工ID" />
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text">详情</el-button>
                <el-button
                  v-if="scope.row.status == '待派单'"
                  type="text"
                  @click="dispatch(scope.row.id)"
                >派单</el-button>
                <el-button
                  v-else-if="scope.row.status == '待接单'"
                  type="text"
                  style="color:#FFC0A2"
                  @click="noDispatch(scope.row.id)"
                >取消派单</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="待服务">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              align="center"
              prop="id"
              label="订单编号"
              width="180"
            />
            <el-table-column
              prop="orderTime"
              align="center"
              label="下单时间"
              width="180"
            >
              <template slot-scope="scope">
                {{ scope.row.orderTime | fmtDate }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="总价">
              <template slot-scope="scope">
                {{ all(scope.row.orderLines) }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="status" label="状态" />
            <el-table-column align="center" prop="customerId" label="顾客ID" />
            <el-table-column align="center" prop="employeeId" label="员工ID" />
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text">详情</el-button>
                <el-button
                  v-if="scope.row.status == '待派单'"
                  type="text"
                  @click="dispatch(scope.row.id)"
                >派单</el-button>
                <el-button
                  v-else-if="scope.row.status == '待接单'"
                  type="text"
                  style="color:#FFC0A2"
                  @click="noDispatch(scope.row.id)"
                >取消派单</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="待确认">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              align="center"
              prop="id"
              label="订单编号"
              width="180"
            />
            <el-table-column
              prop="orderTime"
              align="center"
              label="下单时间"
              width="180"
            >
              <template slot-scope="scope">
                {{ scope.row.orderTime | fmtDate }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="总价">
              <template slot-scope="scope">
                {{ all(scope.row.orderLines) }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="status" label="状态" />
            <el-table-column align="center" prop="customerId" label="顾客ID" />
            <el-table-column align="center" prop="employeeId" label="员工ID" />
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text">详情</el-button>
                <el-button
                  v-if="scope.row.status == '待派单'"
                  type="text"
                  @click="dispatch(scope.row.id)"
                >派单</el-button>
                <el-button
                  v-else-if="scope.row.status == '待接单'"
                  type="text"
                  style="color:#FFC0A2"
                  @click="noDispatch(scope.row.id)"
                >取消派单</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已完成">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              align="center"
              prop="id"
              label="订单编号"
              width="180"
            />
            <el-table-column
              prop="orderTime"
              align="center"
              label="下单时间"
              width="180"
            >
              <template slot-scope="scope">
                {{ scope.row.orderTime | fmtDate }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="总价">
              <template slot-scope="scope">
                {{ all(scope.row.orderLines) }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="status" label="状态" />
            <el-table-column align="center" prop="customerId" label="顾客ID" />
            <el-table-column align="center" prop="employeeId" label="员工ID" />
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text">详情</el-button>
                <el-button
                  v-if="scope.row.status == '待派单'"
                  type="text"
                  @click="dispatch(scope.row.id)"
                >派单</el-button>
                <el-button
                  v-else-if="scope.row.status == '待接单'"
                  type="text"
                  style="color:#FFC0A2"
                  @click="noDispatch(scope.row.id)"
                >取消派单</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 底部分页区域 -->
    <div class="paginetion">
      <!-- 分页组件 -->
      <el-pagination
        :hide-on-single-page="valuerf"
        :page-sizes="[4, 8, 12]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 模态框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-radio-group v-for="(order,index) in allStall" :key="index" v-model="radio">
        <el-radio :label="order.username" @change="waiterIdall(order.id)" />
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="offStall()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { get} from '@/utils/request'
export default {
  data() {
    return {
      radio: '',
      dialogVisible: false,
      pageSize: '4', // 每页显示条目个数
      total: 7, // 总条目数
      currentPage: '1', // 当前的页码
      tableData: [],
      valuerf: false,
      allStall: [], // 所有员工
      orderId: 0, // 要拍的订单id
      orderWaiterId: 0, // 被派单的员工id
      ordernoPay: [], // 未支付
      orderdispatch: [], // 待派单
      orderRecive: [], // 待接单
      orderServe: [], // 待服务
      ordernocertain: [], // 待确认
      ordercertain: [], // 已完成
      name: 0,
      nameorder: ''
    }
  },
  computed: {},
  created() {
    this.getAllOrder()
  },
  mounted() {},
  methods: {
    Tab() {
      this.getAllOrder()
    },
    allo() {
      if (this.name == 0) {
        this.nameorder = null
      }
      if (this.name == 1) {
        this.nameorder = '待支付'
      }
      if (this.name == 2) {
        this.nameorder = '待派单'
      }
      if (this.name == 3) {
        this.nameorder = '待接单'
      }
      if (this.name == 4) {
        this.nameorder = '待服务'
      }
      if (this.name == 5) {
        this.nameorder = '待确认'
      }
      if (this.name == 6) {
        this.nameorder = '已完成'
      }
      console.log(this.name)
    },
    waiterIdall(id) {
      this.orderWaiterId = id
    },
    handleSizeChange(val) {
      // 将每页要展示的数据的条数 进行一个更新
      this.pageSize = val
      // 将当前的页数 重置到第一页
      this.currentPage = '1'
      // 重新调用获取所有产品数据的方法
      this.getAllOrder()
    },
    handleCurrentChange(val) {
      // 当前页面数
      this.currentPage = val
      this.getAllOrder()
    },
    // 获取订单信息
    async getAllOrder() {
      this.allo()
      const data = {
        page: this.currentPage,
        pageSize: this.pageSize,
        status: this.nameorder
      }
      const res = await get('/order/pageQuery', { ...data })
      this.tableData = res.data.list
      this.total = res.data.total
    },
    all(order) {
      let i = {}
      let mun = 0
      for (i in order) {
        mun = mun + order[i].price * order[i].number
      }
      return mun
    },
    async dispatch(rowId) {
      this.orderId = rowId
      this.dialogVisible = true
      const data = {
        page: 1,
        pageSize: 100,
        roleId: '1'
      }
      const res = await get('/baseUser/pageQuery', data)
      console.log(res)
      this.allStall = res.data.list
    },
    async noDispatch(rowId) {
      const data = {
        orderId: rowId
      }
      const res = await get('/order/cancelSendOrder', data)
      console.log(res)
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: 'success'
        })
        // 重新刷新页面的数据
        this.getAllOrder()
      } else {
        this.$message.error(res.message)
      }
    },
    async offStall() {
      const data = {
        waiterId: this.orderWaiterId,
        orderId: this.orderId
      }
      const res = await get('/order/sendOrder', data)
      console.log(res)
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: 'success'
        })
        // 重新刷新页面的数据
        this.dialogVisible = false
        this.getAllOrder()
      } else {
        this.$message.error(res.message)
      }
      this.radio = ''
    },
    // 点击跳转，通过id向订单详情页传值
    detail(id) {
      this.$router.push({
        // 路径
        path: '/admin/order/Details',
        // 传递的参数
        query: { id }
      })
    }
  }
}
</script>
<style scoped>
.header {
  font-size: 20px;
}
.el-radio{
  margin-bottom:15px ;
  margin-right: 10px;
}
.man {
  display: flex;
  flex-direction: column;
  align-self: flex-end;
}
</style>
